<template>
  <div class="container">
    <header class="header">
      <h1>{{ title }}</h1>
      <nav class="nav">
        <a v-for="item in menuItems" 
           :key="item.id" 
           :class="['nav-item', { active: activeItem === item.id }]"
           @click="setActiveItem(item.id)">
          {{ item.text }}
        </a>
      </nav>
    </header>
    <main class="main-content">
      <div class="card" v-for="card in cards" :key="card.id">
        <div class="card-image">
          <img :src="card.image" :alt="card.title">
        </div>
        <div class="card-content">
          <h3>{{ card.title }}</h3>
          <p>{{ card.description }}</p>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const title = ref('SCSS预处理器示例')
const activeItem = ref(1)

const menuItems = [
  { id: 1, text: '首页' },
  { id: 2, text: '产品' },
  { id: 3, text: '关于' },
  { id: 4, text: '联系' }
]

const cards = [
  {
    id: 1,
    title: '卡片标题1',
    description: '这是第一张卡片的描述内容',
    image: 'https://via.placeholder.com/300x200'
  },
  {
    id: 2,
    title: '卡片标题2',
    description: '这是第二张卡片的描述内容',
    image: 'https://via.placeholder.com/300x200'
  }
]

const setActiveItem = (id) => {
  activeItem.value = id
}
</script>

<style lang="scss" scoped>
// 变量定义
$primary-color: #4CAF50;
$secondary-color: #2196F3;
$text-color: #333;
$spacing-unit: 8px;

// Mixins
@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

@mixin card-shadow {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

// 嵌套语法和父选择器引用
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: $spacing-unit * 2;

  .header {
    margin-bottom: $spacing-unit * 3;
    
    h1 {
      color: $text-color;
      margin-bottom: $spacing-unit * 2;
    }
  }
}

.nav {
  display: flex;
  gap: $spacing-unit * 2;

  &-item {
    padding: $spacing-unit $spacing-unit * 2;
    color: $text-color;
    text-decoration: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;

    &:hover {
      background-color: lighten($primary-color, 40%);
    }

    &.active {
      background-color: $primary-color;
      color: white;
    }
  }
}

.main-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: $spacing-unit * 3;
}

.card {
  @include card-shadow;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s ease;

  &:hover {
    transform: translateY(-4px);
  }

  &-image {
    img {
      width: 100%;
      height: 200px;
      object-fit: cover;
    }
  }

  &-content {
    padding: $spacing-unit * 2;

    h3 {
      color: $text-color;
      margin-bottom: $spacing-unit;
    }

    p {
      color: lighten($text-color, 20%);
      line-height: 1.6;
    }
  }
}

// 媒体查询
@media (max-width: 768px) {
  .nav {
    flex-direction: column;
    gap: $spacing-unit;
  }

  .main-content {
    grid-template-columns: 1fr;
  }
}
</style>
